<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DXF Viewer</title>
    <style>
      .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #ccc;
        border-top-color: #409EFF; /* Element Plus primary color */
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }
    
      @keyframes spin {
        to { transform: rotate(360deg); }
      }
    </style>
  </head>
  <body>
    <!-- Loading overlay -->
    <div id="loader" style="
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: white;
      z-index: 9999;
    ">
      <div class="spinner"></div>
    </div>
    <div id="app"></div>
    <canvas id="canvas" class="canvas"></canvas>
    <script type="module" src="/src/main.ts"></script>
    <script type="module" defer>
      // Compression support script - loads compressed files when available
      if (!import.meta.env.DEV) {
        const loadCompressedScript = (src) => {
          return new Promise((resolve, reject) => {
            // Try brotli first (smaller), then gzip, then original
            const testCompressed = async (url, encoding) => {
              try {
                const response = await fetch(url, { method: 'HEAD' });
                if (response.ok) {
                  const script = document.createElement('script');
                  script.type = 'module';
                  script.src = url;
                  script.onload = () => resolve();
                  script.onerror = () => reject(new Error(`Failed to load ${url}`));
                  document.head.appendChild(script);
                  return true;
                }
              } catch (e) {
                // Continue to next compression type
              }
              return false;
            };

            const baseUrl = src.replace(/\.js$/, '');
            const extensions = ['.br', '.gz', '.js'];
            
            const tryNext = async (index) => {
              if (index >= extensions.length) {
                reject(new Error('No script version available'));
                return;
              }
              
              const url = baseUrl + extensions[index];
              const loaded = await testCompressed(url, extensions[index]);
              if (!loaded) {
                tryNext(index + 1);
              }
            };
            
            tryNext(0);
          });
        };

        // Override the default script loading to use compression
        const originalScripts = document.querySelectorAll('script[type="module"]');
        originalScripts.forEach(script => {
          if (script.src && script.src.includes('/src/main.ts')) {
            script.remove();
            loadCompressedScript('/src/main.ts');
          }
        });
      }

      if (import.meta.env.DEV) {
        (async () => {
          // Create a script element to load the module
          const script = document.createElement("script");
          script.type = "module";
          script.src = "/assets/libredwg-web.js";
          script.async = true;
          
          script.onload = async () => {
            // Import dynamically after script is loaded
            const actualModule = await import(/* @vite-ignore */script.src);
            const libredwg = await actualModule.createModule();
            window.dispatchEvent(new CustomEvent("libredwg-ready", { detail: libredwg }));
          };
      
          document.body.appendChild(script);
        })();
      }
    </script>
  </body>
</html> 